<style scoped lang='scss'>
.wrapper {
    .top {
        width: 100%;
        height: 462px;
        background-image: url('../assets/about/top.png');
        background-repeat: no-repeat;
        background-size: 100%;
        padding-top: 200px;
        box-sizing: border-box;
        .we {
            margin: 0 auto 30px;
            width: 160px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 40px;
        }
        .we-desc {
            width: 436px;
            height: 78px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 26px;
            margin: 0 auto;
        }
    }
    .culture {
        width: 100%;
        height: 542px;
        background: rgba(255, 255, 255, 1);
        padding: 80px 0 104px;
        box-sizing: border-box;
        .title {
            width: 160px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 0 auto 80px;
        }
        .culture-item {
            display: flex;
            width: 812px;
            margin: 0 auto;
            justify-content: space-between;
            li {
                width: 184px;
                margin-right: 130px;
                .culture-icon {
                    width: 120px;
                    height: 120px;
                    margin: 0 auto;
                    background-size: 100%;
                }
                .culture-name {
                    width: 120px;
                    height: 24px;
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(13, 26, 38, 1);
                    line-height: 24px;
                    margin: 16px auto 30px;
                }
                .culture-desc {
                    width: 184px;
                    height: 48px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                    line-height: 24px;
                    margin: 0 auto;
                }
            }
        }
    }
    .time-wrapper {
        width: 100%;
        height: 805px;
        background: rgba(248, 249, 250, 1);
        padding-top: 80px;
        .title {
            width: 160px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 0 auto 80px;
        }
        .block {
            width: 1000px;
            height: 621px;
            margin: 0 auto;
            display: flex;
            position: relative;
            overflow: hidden;
            .timelineUL {
                position: absolute;
                top: 0;
                transition-duration: 0.5s;
                .el-timeline-item {
                    width: 800px;
                    padding-bottom: 64px;
                }
            }
            .right {
                margin-top: 122px;
                padding-left: 60px;
                display: flex;
                position: absolute;
                top: 30px;
                right: 0px;
                .bor {
                    width: 1px;
                    height: 232px;
                    background: rgba(216, 216, 216, 1);
                }
                .time {
                    margin-left: 10px;
                    width: 55px;
                    border-left: 1 solid rgba(216, 216, 216, 1) !important;
                    li {
                        width: 48px;
                        height: 14px;
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: rgba(102, 102, 102, 1);
                        line-height: 14px;
                        margin-bottom: 28px;
                        &.active {
                            color: rgba(47, 84, 235, 1);
                        }
                    }
                }
            }
        }
    }
}
</style>

<style scoped>
.el-timeline-item {
    height: 150px;
}
.card-title {
    width: 320px;
    height: 20px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(13, 26, 38, 1);
    line-height: 20px;
}
.card-container {
    width: 800px;
    height: 72px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 24px;
    margin-top: 15px;
}
.card {
    background: #f8f9fa;
    padding: 20px;
}
.el-timeline-item >>> .el-timeline-item__timestamp {
    width: 44px;
    height: 18px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(13, 26, 38, 1);
    line-height: 18px;
}
</style>
<template>
    <div class="wrapper">
        <div class="top">
            <p class="we">我们是谁</p>
            <p class="we-desc">
                让每一个客户，都能够中分享受信息技术带来的发展红利。让每一个客户，都能够中分享受信息技术带来的发展红利。让每一个客户，都能够中分享受信息技术带来的发展红利。让每一个客户，都能够中分享受信息技术带来的发展红利。
            </p>
        </div>
        <div class="culture">
            <p class="title">公司文化</p>
            <ul class="culture-item">
                <li>
                    <div class="culture-icon">
                        <img src="../assets/about/使命.png" alt="">
                    </div>
                    <p class="culture-name">我们的使命</p>
                    <p class="culture-desc">让每个客户，都能充分享受信息技术带来的发展红利</p>
                </li>
                <li>
                    <div class="culture-icon">
                        <img src="../assets/about/使命.png" alt="">
                    </div>
                    <p class="culture-name">我们的使命</p>
                    <p class="culture-desc">让每个客户，都能充分享受信息技术带来的发展红利</p>
                </li>
                <li>
                    <div class="culture-icon">
                        <img src="../assets/about/使命.png" alt="">
                    </div>
                    <p class="culture-name">我们的使命</p>
                    <p class="culture-desc">让每个客户，都能充分享受信息技术带来的发展红利</p>
                </li>
            </ul>
        </div>
        <div class="time-wrapper">
            <div class="title">发展历程</div>
            <div class="block">
                <div ref="timelineUL" class="timelineUL">
                    <el-timeline class="timeline">
                        <el-timeline-item timestamp="2020/4/12" placement="top" class="timeline-item">
                            <div class="card">
                                <p class="card-title">正式更名为杭州匠把头科技有限公司</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2019/4/3" placement="top">
                            <div class="card">
                                <p class="card-title">迎来项目总监阿波</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" placement="top">
                            <div class="card">
                                <p class="card-title">取名为杭州守望科技有限公司</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2017/4/12" placement="top">
                            <div class="card">
                                <p class="card-title">正式更名为杭州匠把头科技有限公司</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2016/4/12" placement="top">
                            <div class="card">
                                <p class="card-title">式更名为杭州匠把头科技有限公司</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2015/4/12" placement="top">
                            <div class="card">
                                <p class="card-title">正式更名为杭州匠把头科技有限公司</p>
                                <p class="card-container">事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容事件详情内容</p>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
                <div class="right">
                    <div class="bor"></div>
                    <ul class="time">
                        <li v-for="(year,index) in years" :key="year+3" @click="listenTimeClick(index)" :class="index==currentIndex?'active':''">{{year}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <cor></cor>
    </div>
</template>

<script type="text/ecmascript-6">
import Cor from "../components/Cor"
import { Card, Timeline, TimelineItem } from "element-ui"
export default {
    name: "Index",
    data() {
        return {
            years: [2020, 2019, 2018, 2017, 2016, 2015],
            currentIndex: 0
        }
    },
    components: {
        [Cor.name]: Cor,
        [Card.name]: Card,
        [Timeline.name]: Timeline,
        [TimelineItem.name]: TimelineItem
    },
    methods: {
        listenTimeClick(index) {
            this.currentIndex = index;
            const top_num = index * (-214);
            const timelineUL = this.$refs.timelineUL;
            timelineUL.style.top = top_num + 'px'
        }
    }
}
</script>


